<template>
  <div style="height: 100%;">
    <div id="mainEchart" style="height: 500px;width: 100%;"></div>
  </div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    props: {
      StatisticsData: {
        type: Array
      },
      title: {
        type: String
      }
    },
    data() {
      return {
        bgColor: 'rgba(243, 243, 243, 0.3)'
      }
    },
    watch: {
      StatisticsData: {
        handler(newValue, oldValue) {
          let that = this
          if (newValue !== oldValue) {
            this.handleEcharts()
          }
        },
        immediate: true
      }
    },
    mounted() {
      this.handleEcharts()
    },
    methods: {
      // 渲染数据
      handleEcharts() {
       let option = {
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          toolbox: {
            feature: {
              saveAsImage: {
                type: 'png'
              }
            }
          },
          series: [{
            name: this.title,
            type: 'pie',
            radius: '70%',
            center: ['50%', '50%'],
            clockwise: false,
            data: this.StatisticsData,
            label: {
              normal: {
                textStyle: {
                  color: '#464646',
                  fontSize: 14,
                }
              }
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                borderWidth: 4,
                borderColor: '#ffffff',
              },
              emphasis: {
                borderWidth: 0,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }],
          color: ['#00acee', '#52cdd5', '#79d9f1', '#a7e7ff', '#c8efff'],
          backgroundColor: this.bgColor
        }
        setTimeout(() => {
          let mainDom = document.getElementById('mainEchart')
          let mainEchart = echarts.init(mainDom)
          mainEchart.setOption(option)
          window.addEventListener('resize', () => {
            mainEchart.resize()
          })
        }, 500)
      }
    }
  }
</script>

<style scoped lang="scss">
  #mainEchart {
    // box-shadow: 0px 0px 10px #ebebeb;
  }
</style>
